<template>
  <div class="goods-container mb60 mt50">
    <!-- 头部导航 -->
    <van-nav-bar fixed :title="goodsInfo.goodsname" @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <van-icon name="arrow-left" color="red" size="20" />
      </template>
      <template #right>
        <van-icon name="cart-o" color="red" size="24" />
      </template>
    </van-nav-bar>
    <!-- 商品封面图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item>
        <img v-lazy="$baseUrl + goodsInfo.img" class="goods-cover" />
      </van-swipe-item>
    </van-swipe>

    <div class="goods-desc">
      <h5 class="price">&yen;{{ goodsInfo.price }}</h5>
      <p>{{ goodsInfo.goodsname }}</p>
      <van-cell-group>
        <van-cell title="促销" value="购买可得积分999" />
        <van-cell title="服务" value="七天无理由退还" label="假一赔十" />
      </van-cell-group>
      <!-- 商品详细介绍 -->
      <div v-html="goodsInfo.description"></div>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="首页" @click="$router.push('/index')" />
      <van-goods-action-icon icon="cart-o" :badge="cartGoodsCount" text="购物车" @click="$router.push('/cart')" />
      <van-goods-action-button type="danger" text="立即购买" @click="addGoodsToCart" />
    </van-goods-action>

    <!-- sku -->
    <van-sku v-model="skuShow" :sku="sku" :goods="goodsInfo" :goods-id="goodsInfo.id" @buy-clicked="onBuyClicked"
      :show-add-cart-btn="false" />

  </div>
</template>
  
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
  created() {
    const { id } = this.$route.query;
    if (!id) {
      this.$toast('参数错误');
      this.$router.push('/home');
    }
  },
  computed: {
    ...mapGetters('cart', ['cartGoodsCount'])
  },
  mounted() {
    this.getGoodsInfo();
  },
  data() {
    return {
      // 商品详情
      goodsInfo: {},
      // sku
      skuShow: true,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
        price: '0.00', // 默认价格（单位元）
        stock_num: 0, // 商品总库存
      }

    }
  },
  methods: {
    ...mapActions('cart', ['cartAddAction']),
    onBuyClicked(params) {
      // 商品id, 商品数量
      const { goodsId: goodsid, selectedNum: num, selectedSkuComb } = params;
      // 规格属性id
      const { id: sku_id, s1, s2 } = selectedSkuComb;
      const payload = { goodsid, num, s1, s2, sku_id }
      if (!s2) { payload.s2 = s2 }
      // // 添加购物车
      this.cartAddAction(payload);
      // 关闭sku
      this.skuShow = false;
    },
    // 查询商品详情
    getGoodsInfo() {
      const { id } = this.$route.query;
      this.$axios.get('/getgoodsinfo', { params: { id } }).then(res => {
        if (res.code) {
          if (!res.list) {
            this.$router.push({ name: 'index' });
            this.$toast('商品不存在');
            return false;
          }
          this.goodsInfo = res.list && res.list[0];
          this.goodsInfo.picture = this.$baseUrl + this.goodsInfo.img;
          if (res.list[0].sku) {
            // 商品sku
            this.sku = this.goodsInfo.sku;
            // 设置默认价格和默认库存
            this.sku.price = this.goodsInfo.price;
            this.sku.stock_num = this.goodsInfo.number;
          }
        }
      });
    },
    onClickRight() {
      this.$router.push({ name: 'cart' });
    },
    onClickLeft() {
      this.$router.back();
    },
    addGoodsToCart() {
      // 显示商品sku
      this.skuShow = true;
    }
  }
}
</script>
  
<style>
.goods-cover {
  width: 100%;
  height: 200px;
}

.van-goods-action {
  z-index: 999;
}

.goods-desc {
  padding: 10px 20px;
}

.price {
  color: red;
  font-size: 22px;
}
</style>